<%--
  Created by IntelliJ IDEA.
  User: 27716
  Date: 2024/10/23
  Time: 16:49
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>查看</title>
    <script src="../../static/js/jquery-1.8.2.min.js"></script>
    <link rel="stylesheet" href="../../static/css/css.css">
    <script>
        $(function () {
            let username = $("#name").val();
            let obj = {username: username};
            getRoleList(obj);
        })

        function getRoleList(obj) {
            $.ajax({
                url: "/role/getRoleList",
                type: "post",
                data: {reqInfos: JSON.stringify(obj)},
                dataType: "json",
                success(res) {
                            $("#table").empty();
                            $("#table").append(`
                          <tr>
                            <td>
                                <input type="checkbox" id="check">
                            </td>
                            <td>编号</td>
                            <td>角色名</td>
                            <td>备注</td>
                            <td>操作</td>
                          </tr>

                    `)
                            if (res.length > 0) {
                                for (let x of res) {
                                    $("#table").append(`
                          <tr>
                            <td>
                                  <input type="checkbox" class="ck" value="\${x.rid}">
                            </td>
                            <td>\${x.rid}</td>
                            <td>\${x.username}</td>
                            <td>\${x.remark}</td>
                            <td>
                                <input type="button" value="删除" onclick="toDel(\${x.rid})">
                                <input type="button" value="修改" onclick="toUpd(\${x.rid})">
                            </td>
                          </tr>
                       `)
                    }
                }
            },
            error() {
                alert("查看错误,别学了")
            }
        })
    }
    </script>
</head>
<body>
用户名： <input type="text" id="name">
<input type="button" onclick="search()" value="查询">
<input type="button" id="add" value="添加">
<input type="button" value="批量删除" id="delAll">
<table id="table">
    <tr>
        <td>
            <input type="checkbox" id="check">
        </td>
        <td>编号</td>
        <td>角色名</td>
        <td>备注</td>
        <td>操作</td>
    </tr>
</table>
</body>
<script>
    //搜索
    function search() {
        $("table").empty()
        let username = $("#name").val();
        let obj = {username: username};
        getRoleList(obj);
    }
    //添加
    $("#add").click(function () {
        location.href = "add.jsp"
    })
    //全选
    $(document).on('click',"#check",function (){
        $(".ck").prop("checked",this.checked);
    })
    //删除
    function toDel(uid){
        if(confirm("是否要删除")){
            //2、组装对象
            let obj = {uids:uid};
            //3.异步请求
            $.ajax({
                url:"/role/getToDel",
                type: "post",
                data: {reqInfos: JSON.stringify(obj)},
                dataType: "json",
                success(res) {
                    console.log(res);
                    if(res===200){
                        alert("删除成功")
                        location.reload();
                    }
                },
                error() {
                    alert("删除失败，请重新尝试");
                }
            })
        }
    }
    //批量删除
    $("#delAll").click(function () {
        //1.取值 2.组装对象 3.发起异步请求
        //获取 选中的复选框 ，循环获取每一个 复选框
        let arr = [];
        $(".ck:checked").each(function () {
            let id = $(this).val();
            arr.push(id);
        })
        //将数组传 字符串
        let uids = arr.join(",");
        if (!uids) {
            alert("请选择要删除的数据")
            return;
        }
        //调用 单删函数
        toDel(uids);
    })


    function toUpd(rid){
        location.href = "upd.jsp?rid="+rid;
    }
</script>
</html>
